<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:525px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{info.nickname}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        自我介绍：
<!--                        <span>2019-11-01</span>-->
                    </div>
                    <br>
                    <div class="user-info-list">
                        {{info.introduction}}
<!--                        <span>东莞</span>-->
                    </div>
                </el-card>
<!--                <el-card shadow="hover" style="height:252px;">-->
<!--                    <div slot="header" class="clearfix">-->
<!--                        <span>语言详情</span>-->
<!--                    </div>Vue-->
<!--                    <el-progress :percentage="71.3" color="#42b983"></el-progress>JavaScript-->
<!--                    <el-progress :percentage="24.1" color="#f1e05a"></el-progress>CSS-->
<!--                    <el-progress :percentage="13.7"></el-progress>HTML-->
<!--                    <el-progress :percentage="5.9" color="#f56c6c"></el-progress>-->
<!--                </el-card>-->
            </el-col>
            <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-1">
                        <i class="el-icon-lx-people grid-con-icon"></i>
<!--                        <div class="grid-cont-right">-->
<!--                            <div class="grid-num">1234</div>-->
<!--                            <div>用户访问量</div>-->
<!--                        </div>-->
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-2">
                        <i class="el-icon-lx-notice grid-con-icon"></i>
<!--                        <div class="grid-cont-right">-->
<!--                            <div class="grid-num">321</div>-->
<!--                            <div>系统消息</div>-->
<!--                        </div>-->
                    </div>
                </el-card>
            </el-col>
            <el-col :span="8">
                <el-card shadow="hover" :body-style="{padding: '0px'}">
                    <div class="grid-content grid-con-3">
                        <i class="el-icon-lx-goods grid-con-icon"></i>
<!--                        <div class="grid-cont-right">-->
<!--                            <div class="grid-num">5000</div>-->
<!--                            <div>数量</div>-->
<!--                        </div>-->
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-card shadow="hover" style="height:403px;">
            <div slot="header" class="clearfix">
                <span>个人信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="edit()">修改</el-button>
            </div>
            <div class="clearfix">
                <br>
                <span>昵称：{{info.nickname}}</span>
                <br><br>
                <span>爱好：{{info.hobby}}</span>
                <br><br>
                <span>住址：{{info.address}}</span>
            </div>

<!--            <el-form :model="userForm" :rules="rules" class="ms-content" label-position="left"-->
<!--                     label-width="0px" v-loading="loading">-->
<!--                <el-form-item prop="rnickname">-->
<!--                    <el-input v-model="info.nickname" placeholder="昵称" clearable style="width: 250px" ></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item prop="rhobby">-->
<!--                    <el-input v-model="info.hobby" placeholder="爱好" style="width: 250px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item prop="raddress">-->
<!--                    <el-input v-model="info.address" placeholder="地址" style="width: 250px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item style="width: 100%">-->
<!--                    <el-button type="primary" style="width: 100px;background: #505458;border: none;" v-on:click="edit">提交</el-button>-->
<!--                </el-form-item>-->
<!--            </el-form>-->


<!--            <el-table :show-header="false" :data="todoList" style="width:100%;">-->
<!--                <el-table-column width="40">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-checkbox v-model="scope.row.status"></el-checkbox>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column>-->
<!--                    <template slot-scope="scope">-->
<!--                        <div-->
<!--                                class="todo-item"-->
<!--                                :class="{'todo-item-del': scope.row.status}"-->
<!--                        >{{scope.row.title}}</div>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column width="60">-->
<!--                    <template>-->
<!--                        <i class="el-icon-edit"></i>-->
<!--                        <i class="el-icon-delete"></i>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
        </el-card>
    </el-col>
        </el-row>
<!--        <el-row :gutter="20">-->
<!--            <el-col :span="12">-->
<!--                <el-card shadow="hover">-->
<!--                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--            <el-col :span="12">-->
<!--                <el-card shadow="hover">-->
<!--                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>-->
<!--                </el-card>-->
<!--            </el-col>-->
<!--        </el-row>-->
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
import axios from 'axios'
export default {
    name: 'dashboard',
    data() {
        return {

            info:{
                introduction: localStorage.getItem('introduction'),
                account: localStorage.getItem('ms_username'),
                nickname: localStorage.getItem('nickname'),
                hobby: localStorage.getItem('hobby'),
                address: localStorage.getItem('address')
            },

        };
    },

    computed: {
        role() {
            return this.info.account === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    // created() {
    //     this.handleListener();
    //     this.changeDate();
    // },
    // activated() {
    //     this.handleListener();
    // },
    // deactivated() {
    //     window.removeEventListener('resize', this.renderChart);
    //     bus.$off('collapse', this.handleBus);
    // },
    methods: {
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        edit(){
            this.$router.push('/form');
                // axios.post('http://localhost:8888/edit',this.info)
                //     .then(res=>{
                //
                //         if(res.data.code==2000){
                //             this.$alert( '修改成功成功', {confirmButtonText: '知道了',})
                //             localStorage.setItem('ms_username', this.info.account);
                //             localStorage.setItem('nickname', this.info.nickname);
                //             localStorage.setItem('hobby', this.info.hobby);
                //             localStorage.setItem('address', this.info.address);
                //             localStorage.setItem('introduction', this.info.introduction);
                //             // this.$router.push('/dashboard');
                //         }
                //
                //
                //     })


        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
